<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>列表页面</h1>
  <div v-for="i in arr">
    <h3>{{i.title}}</h3>
    <p>{{i.created}} <a href="javascript:void(0)" @click="del(i.id)">删除</a></p>
      <!--遍历多张图片-->
      <img v-for="url in i.arr" width="100" :src="url">
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
  let v = new Vue({
    el:"body>div",
    data:{
      arr:[]
    },
    methods: {
        del(id){
            if (confirm("您确认删除吗?")){
                axios.get("/delete?id="+id).then(function () {
                    location.reload();//刷新页面
                })
            }

        }
    },
    created:function () {
      axios.get("/select").then(function (response) {
        v.arr = response.data;
          for (let image of v.arr) {
              // id,title,urls,created
              //把装着多个图片路径的urls字符串通过逗号拆分 得到一个数组
              //利用JS语言对象可以动态添加属性的方式,把得到的数组和图片对象进行关联
              image.arr = image.urls.split(",");
          }

      })
    }
  })
</script>
</body>
</html>